<template>
  <div class="plan-create">
    <header class="header">
      <h1>新建打卡计划</h1>
    </header>

    <el-form @submit.prevent="submitPlan" :model="form" label-position="top" class="plan-form">
      <el-form-item label="计划名称" prop="title">
        <el-input v-model="form.title" placeholder="请输入计划名称" clearable></el-input>
      </el-form-item>

      <el-form-item label="计划描述" prop="description">
        <el-input 
          v-model="form.description" 
          type="textarea" 
          :rows="3" 
          placeholder="请输入计划描述"
        ></el-input>
      </el-form-item>

      <el-form-item label="打卡类型">
        <el-radio-group v-model="form.type">
          <el-radio label="daily">每日打卡</el-radio>
          <el-radio label="weekly">每周打卡</el-radio>
          <el-radio label="monthly">每月打卡</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="开始日期">
            <el-date-picker
              v-model="form.startDate"
              type="date"
              placeholder="选择开始日期"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束日期">
            <el-date-picker
              v-model="form.endDate"
              type="date"
              placeholder="选择结束日期"
              :disabled-date="disabledEndDate"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="每周打卡天数" v-if="form.type === 'weekly'">
        <el-input-number 
          v-model="form.weeklyDays" 
          :min="1" 
          :max="7"
          controls-position="right"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="每月打卡天数" v-if="form.type === 'monthly'">
        <el-input-number 
          v-model="form.monthlyDays" 
          :min="1" 
          :max="31"
          controls-position="right"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="提醒设置">
        <el-switch
          v-model="form.reminder"
          active-text="开启打卡提醒"
        ></el-switch>
      </el-form-item>

      <div class="form-actions">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitPlan">创建计划</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'

export default {
  name: 'PlanCreate',
  data() {
    return {
      form: {
        title: '',
        description: '',
        type: 'daily',
        startDate: '',
        endDate: '',
        weeklyDays: 3,
        monthlyDays: 15,
        reminder: false
      }
    }
  },
  methods: {
    submitPlan() {
      if (!this.form.title) {
        ElMessage.warning('请输入计划名称')
        return
      }
      if (!this.form.startDate || !this.form.endDate) {
        ElMessage.warning('请选择开始和结束日期')
        return
      }

      // TODO: 提交到Vuex
      console.log('提交计划：', this.form)
      ElMessage.success('计划创建成功')
      // 提交成功后跳转到计划列表
      this.$router.push('/plan-list')
    },
    cancel() {
      this.$router.go(-1)
    },
    disabledEndDate(time) {
      // 禁用早于开始日期的结束日期
      if (this.form.startDate) {
        return time.getTime() < new Date(this.form.startDate).getTime()
      }
      return false
    }
  }
}
</script>

<style scoped>
.plan-create {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  margin-bottom: 30px;
}

.header h1 {
  margin: 0;
  color: #333;
}

.plan-form {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 30px;
}
</style>